<?php if($this->session->userdata('admin')){?>
<table width=100% border=1 cellspacing=3>
 	<tr>
 	<td width=50%>
 	     <div id="example" class="k-content">
 	
            <div class="chart-wrapper">
                <div id="chart"></div>
            </div>
                </div>
    </td>
    <td valign=top>
      
     <div id="example" class="k-content">
    <div class="chart-wrapper">
                <div id="chart2"></div>
            </div>
      </div>
       
      <!--<div class=k-content> 
     	 <div id=gridwork></div>
	
      </div> -->
    </td>
    </tr>
 </table>
<?php 
}
?>
            <style scoped>
                .chart-wrapper {
                	margin: 0 0 0 00px;
                	width: 300px;
                	height: 250px;
                	
                }
                
                .chart-wrapper .k-chart {
                    height: 220px;
                    padding: 10px;
                    width: 500px;
                }
            </style>       

 
<h3>Work List</h3>
 <table id="grid">
        <thead>
          <tr>
            <th data-field="t_id"><div align="center">No.</div></th> 
            <th data-field="date"><div align="center">Date</div></th>
             <th data-field="form"><div align="center">Form</div></th>
            <th data-field="type_product"><div align="center">Type</div></th>
            <th data-field="type_of"><div align="center">Type</div></th>
            <th data-field="gram"><div align="center">Gram</div></th>
            <th data-field="reel_no"><div align="center">Reel No</div></th>
            <th data-field="grade"><div align="center">Grade</div></th>
             <th data-field="userkey"><div align="center">User Key</div></th>
	   <th data-field="status"><div align="center">Status</div></th>
            <th data-field="control"><div align="center">Control</div></th>
          </tr>
        </thead>
        <tbody>
        <?php foreach ($rs as $r) 
		{
          echo "<tr>";
          echo "<td>"."<div align='center'>".$r['order_id']."</div>"."</td>";
          echo "<td>".$r['modify_date']."</td>";
          echo "<td>".$r['form_name']."</td>";
          echo "<td>".$r['type_product']."</td>";
          echo  "<td>".$r['type_of']."</td>";
          echo  "<td>". $r['gram']. "</td>";
          echo  "<td>". $r['reel_no']. "</td>";
          echo  "<td>". $r['grade']. "</td>";
          echo  "<td>". $r['user_keyin']. "</td>";
		  echo  "<td >"  ;
		  if($r['status']){
		  	echo "<font color=Green>";
		  	echo $r['status_text'];
		  	echo "</font>";
		  }else{
		  	
		  	echo "<font color=Red>";
		  	echo $r['status_text'];
		  	echo "</font>";
		  }
		  echo " </td>";
		  echo  "<td>";
		  echo 
		  "<div align='center'>".anchor("masterreel/detail_masterreel/".$r['t_id'],
		  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		  echo  "</td>";
          echo  "</tr>";
		}
          ?>
        </tbody>
      </table>
 



    <script>



		function createChart2() {
			    $("#chart2").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "Work of month"
			        },
			        legend: {
			            position: "bottom"
			        },
			        seriesDefaults: {
			            type: "bar",
			            stack: true
			        },
			        series: [{
			            name: "Open Jobs",
			            data: [67.96, 128.93, 75, 74, 78]
			        }, {
			            name: "Completed",
			            data: [15.7, 16.7, 20, 23.5, 26.6]
			        }],
			        valueAxis: {
			            labels: {
			                format: "{0}  "
			            }
			        },
			        categoryAxis: {
			            categories: ["Jan", "Feb", "Mar", "Apr", "May"]
			        },
			        tooltip: {
			            visible: true,
			            format: "{0}  "
			        }
			    });
			}

			
			function createChart() {
			    $("#chart").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "ระบบงาน QI ในระบบทั้งหมด"
			        },
			        legend: {
			            position: "right",
			            labels: {
			                template: "#= text # (#= value #%)"
			            }
			        },
			        seriesDefaults: {
			            labels: {
			                visible: true,
			                format: "{0}%"
			            }
			        },
			        series: [{
			            type: "pie",
			            data: [ {
			                category: "Open Jobs",
			                value: 22
			            }, {
			                category: "Waitting for Head Engineering",
			                value: 2
			            }, {
			                category: "Waiting for Department Manager",
			                value: 49
			            }, {
			                category: "Pending",
			                value: 27
			            } ]
			        }],
			        tooltip: {
			            visible: true,
			            format: "{0}%"
			        }
			    });
			}



                $(document).ready(function() {

 			setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);

		  
                    setTimeout(function() {
                    	createChart();
                        createChart2();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                            createChart2();
                            
                        });
                    }, 500);

                  	 

                    $("#grid").kendoGrid({
						columns: [
						{ field: "t_id", width: "10px" },
						{ field: "date", width: "80px" },
						{ field: "form", width: "50px" },
						{ field: "type_product", width: "50px" },
						{ field: "type_of", width: "10px" },
						{ field: "gram", width: "10px" },
						{ field: "reel_no", width: "50px" },
						{ field: "grade", width: "10px" },
						{ field: "userkey", width: "120px" },
						{ field: "status", width: "30px" },
						{ field: "control",  width: "30px" }
						],
						 
			              height: 500,
						filterable: true,  
                        scrollable: false,
						pageable: true,
						dataSource: {
							pageSize: 10
						} 
                    });
                });
            </script> 
